<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>站酷</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <section class="header">
            <h1 class="logo">
                <img src="./img/logo.svg" alt="">
            </h1>
            <ul class="first_ul clear_fix">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">发现</a>
                    <div class="menu_list">
                        <ul class="ml_top">
                            <li><a href="#">平面</a></li>
                            <li><a href="#">UI</a></li>
                            <li><a href="#">页面</a></li>
                            <li><a href="#">插画</a></li>
                            <li><a href="#">动漫</a></li>
                            <li><a href="#">摄影</a></li>
                            <li><a href="#">空间</a></li>
                            <li><a href="#">工业/产品</a></li>
                            <li><a href="#">三维</a></li>
                            <li><a href="#">影视</a></li>
                            <li><a href="#">手工艺</a></li>
                            <li><a href="#">纯艺术</a></li>
                            <li><a href="#">服装</a></li>
                            <li><a href="#">其他</a></li>
                        </ul>
                        <div class="ml_bottom">
                            <a href="#">精选作品</a>
                            <a href="#">精选作品</a>
                            <a href="#">精选作品</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">职位</a>
                    <ul class="menu_list">
                        <li>职位</li>
                        <li>工作</li>
                        <li>+发布任务</li>
                    </ul>
                </li>
                <li>
                    <a href="#">活动</a>
                    <ul class="menu_list">
                        <li>设计大赛</li>
                        <li>专题策划</li>
                        <li>线上活动</li>
                        <li>线下活动</li>
                        <li>学习音频</li>
                    </ul>
                </li>
                <li>
                    <a href="#">正版素材</a>
                    <ul class="menu_list">
                        <li>图片</li>
                        <li>视频</li>
                        <li>字体</li>
                        <li>音乐</li>
                        <li>我要供图</li>
                    </ul>
                </li>
                <li>
                    <a href="#">课程</a>
                    <ul class="menu_list">
                        <li>免费直播周周见</li>
                        <li>正在热销</li>
                        <li>口碑好课</li>
                    </ul>
                </li>
                <li>
                    <a href="#">版权保护</a>
                    <ul class="menu_list">
                        <li>区块链存证</li>
                        <li>作品登记证书</li>
                        <li>维权服务</li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i></i></a>
                    <ul class="menu_list">
                        <li>设计师</li>
                        <li>榜单</li>
                        <li>站酷APP</li>
                        <li>站酷字库</li>
                    </ul>
                </li>
            </ul>
            <div class="search"></div>
            <div class="upload"></div>
            <section>
                <a href="#" class="login">登录</a>
                <a href="#" class="reg">注册</a>
            </section>
        </section>
    </header>
    <!-- 轮播 -->
    <div class="swiper-container banner-con">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/banner1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/banner2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/banner3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/banner4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/banner5.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/banner6.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/banner7.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/banner8.jpg" alt=""></div>
        </div>
        <!-- 按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <!-- 广告位 -->
    <section class="advtop-con">
        <!-- <div><img src="./img/index1.jpg" alt=""></div>
        <div><img src="./img/index1.jpg" alt=""></div>
        <div><img src="./img/index1.jpg" alt=""></div>
        <div><img src="./img/index1.jpg" alt=""></div>
        <div><img src="./img/index1.jpg" alt=""></div> -->
    </section>
    <!-- 案例 -->
    <section class="case-con">
        <ul class="case_tab">
            <li class="active">首页推荐</li>
            <li>最新发布</li>
        </ul>
        <ul class="case_list">
            <!-- <li class="case_item">
                <img src="./img/recommend1.jpg" alt="">
                <div class="ci_center">
                    <h4 class="text_ellipsis">科技企业价值观（全）</h4>
                    <p>插画-商业插画</p>
                    <div>
                        <i class="look"></i><span>996</span>
                        <i class="talk"></i><span>4</span>
                        <i class="zan"></i><span>35</span>
                    </div>
                </div>
                <ul class="ci_bottom">
                    <li>
                        <img src="./img/user1.jpg" alt="">
                        <span class="text_ellipsis">设计师专访</span>
                    </li>
                    <span>3小时前</span>
                </ul>
            </li> -->
        </ul>
        <ul class="case_btns">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>...</li>
            <li>99</li>
            <li>100</li>
            <li>></li>
        </ul>
    </section>
    <!-- 底部广告位 -->
    <section class="advfoor-con">
        <img src="./img/activity.jpg" alt="">
    </section>
    <!-- 推荐课程 -->
    <section id='course'>
        <div class="course-con">
            <p class="cc-tit">
                <span>推荐课程</span>
                <a href="#">换一批</a>
            </p>
            <ul class="cc-list">
                <li>
                    <img src="./img/footer1.jpg" alt="">
                    <h5>iPad插画入门与创作</h5>
                </li>
                <li>
                    <img src="./img/footer2.jpg" alt="">
                    <h5>零基础摄影大师课</h5>
                </li>
                <li>
                    <img src="./img/footer3.jpg" alt="">
                    <h5>梦幻风格风光摄影后期</h5>
                </li>
                <li>
                    <img src="./img/footer4.jpg" alt="">
                    <h5>黑白摄影·明度建筑风格</h5>
                </li>
                <li>
                    <img src="./img/footer5.jpg" alt="">
                    <h5>AE粒子特效系统教程</h5>
                </li>
            </ul>
        </div>
    </section>
    <!-- 底部 -->
    <footer>
        <div class="footer-con">
            <div class="fc_top">
                <ul>
                    <li>移动版</li>
                    <li>关于我们</li>
                    <li>用户协议</li>
                    <li>隐私政策</li>
                    <li>侵权申诉</li>
                    <li>企业服务</li>
                    <li>帮助中心</li>
                    <li>联系我们</li>
                    <li>中文</li>
                    <li>English</li>
                </ul>
                <span></span>
                <span></span>
            </div>
            <div class="fc_bottom">
                <p>
                    <span>京公网安备11010502000501号</span>
                    <span>广播电视节目制作经营许可证（京）字第06990号</span>
                    <span>京ICP备11017824号</span>
                    <span>京ICP证130164号</span>
                </p>
                <p>
                    <span>营业执照</span>
                    <span>网上有害信息举报专区</span>
                    <span>不良信息举报电话：010-56538658</span>
                    <span>举报邮箱  jubao@zcool.com.cn</span>
                    <span>联系电话：010-56538600</span>   
                </p>    
            </div>
        </div>
    </footer>
    <!-- 返顶 -->
    <div class="toTop"></div>

    <script src="./js/swiper.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/public.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>